import "./Preloader.less";
import { useScheduler } from "./Scheduler";
import { MathUtils } from "../libs/xviewer";
import { gameManager } from "../core/GameManager";
import { defineComponent, ref, watch } from "vue";

export const Preloader = defineComponent(()=>{
  const progressRef = ref();
  const visible = ref(true);
  const progress = ref(0);
  watch(progress,()=>{
    if (progress.value >= 1) {
      visible.value = false
      setTimeout(() => gameManager.emit("preloaded"), 1500);
    }
  })

  useScheduler((dt) => {
    dt = MathUtils.clamp(dt, 0.005, 0.3);
    let t = MathUtils.damp(progress.value, gameManager.progress, 170, dt);
    if (t === 0) return;
    if (t > 0.99) t = 1;
    progress.value = t
  }, [progress]);

  return () => (
    <div class="progress-container" style={{ opacity: visible.value ? "1" : "0" }}>
      <div class="progress-content" >
        <img class="Genshin" src={"Genshin/Genshin.png"} alt="图片" style={{ opacity: visible.value ? "1" : "0" }} />
        <div class="LoadingBar" style={{ opacity: visible.value ? "1" : "0" }}>
          <div class="progress-bar">
            <div ref={progressRef} class="progress" style={{ width: progress.value * 100 + "%" }}></div>
          </div>
          <div class="ball" style={{ left: "-2vmin" }}></div>
          <div class="ball" style={{ left: "40.8vmin", top: "-2.4vmin" }}></div>
          <div style={{ paddingTop: "1vmin", fontSize: "1.4vmin" }}>为了您更好的体验，请在电脑端打开</div>
        </div>
      </div>
    </div>
  )
})